<template>
	<div class="fromStructure" 
		v-loading="loading"
		element-loading-text="拼命加载中"
	    element-loading-spinner="el-icon-loading"
	    element-loading-background="rgba(0, 0, 0, 0.8)"
		>
		<!--左边菜单-->
		<div class="fromStructure-left">
			<div class="fromStructure-sreach">
				<div class="sreach-input-content">
					<i class="iconfont sreach iconsousuo1" @click="sreachClick"></i>
					<input class="sreach-input" v-model="sreachname" placeholder="输入要查询成员" />
				</div>
				<div class="addUser">
					<i class="iconfont userIcon iconjia"></i>
				</div>
			</div>
			<!--列表栏-->
			<div class="list-left" 
				v-for="(it,i) in list" 
				@click.stop="listClick(it,i)">
				<div class="left-in" :class="listI === i?'active':''">
					<div class="iconfont wjicon iconwenjianjia"></div>
					<div class="listname">{{it.name}}</div>
					<div class="iconfont moreicon icongengduo"></div>
				</div>
				<div class="sonlist" 
					v-if="listX === i" 
					v-for="(item,index) in it.deptDOS" 
					@click.stop="sonListClick(it,item,index)"
					:class="sonlistI === index?'active':''">
					<div class="iconfont wjicon iconfl-renshi"></div>
					<div class="listname">{{item.name}}</div>
					<div class="iconfont moreicon icongengduo"></div>
				</div>
			</div>
		</div>
		<!--内容-->
		<div class="fromStructure-content">
			<!--头部-->
			<div class="content-header">
				<div class="titles">
					<div class="ttitle">{{bmname}} ({{bmnumber}})人</div>
				</div>
				<div class="right-option">
					<div class="updataname" @click="updataNameClick()">修改昵称</div>
					<div class="addbm" v-if="addBm" @click="addNewBm(true)">增加子部门</div>
				</div>
			</div>
			<!--操作-->
			<div class="option">
				<div class="option-cell" 
					v-for="(item,index) in optiondata"
					@click="optionClick(item)"
					:class="optionflag && 1 < item.id && item.id < 5?'active':''">
					<i class=" iconfont optionicon iconerweima" v-if="item.id === 5"></i>
					<div class="option-name">{{item.name}}</div>
				</div>
			</div>
			<div class="option-table"
				v-loading="tableloading"
				element-loading-text="拼命加载中"
			    element-loading-spinner="el-icon-loading"
			    element-loading-background="rgba(0, 0, 0, 0.2)">
				<el-table
				    ref="multipleTable"
				    :data="tableData"
				    tooltip-effect="dark"
				    style="width: 100%"
				    @selection-change="handleSelectionChange">
				    <el-table-column
				      type="selection"
				      width="55">
				    </el-table-column>
				    <el-table-column
				      prop="name"
				      label="姓名"
				      align="center"
				      width="150">
				    </el-table-column>
				    <el-table-column
				      prop="name"
				      label="职务"
				      align="center"
				      width="200">
				      <template slot-scope="scope">
				        <el-tag style="margin:1px;" v-for="(item,index) in worklist[scope.$index]" :key="item">{{item}}</el-tag>
				      </template>
				    </el-table-column>
				    <el-table-column
				      prop="levelName"
				      label="职称"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
				    <el-table-column
				      prop="deptName"
				      label="部门"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
				    <el-table-column
				      prop="mobile"
				      label="手机号"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
				    <el-table-column
				      prop="email"
				      label="邮箱"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
				</el-table>
			</div>
			<!--分页-->
			<div class="pages-other">
				<el-pagination
				  background
				  @current-change="handleCurrentChange"
				  layout="prev, pager, next"
				  :page-size="limit"
				  :total="totall">
				</el-pagination>
			</div>
		</div>
		<!--弹出区域-->
		<el-dialog
		  title="新增成员"
		  :visible.sync="centerDialogVisible"
		  width="20%"
		  center>
		  <div class="fromadd">
		  	<el-form ref="form" :model="sizeForm" label-width="100px" size="small">
			  <el-form-item 
			  	label="成员姓名" 
			  	prop="name"
			  	:rules="[
			      { required: true, message: '姓名不能为空',trigger: 'blur'},
			      { message: '姓名必须为字符',trigger: 'blur'}
			    ]">
			    <el-input v-model="sizeForm.name" placeholder="请输入成员姓名"></el-input>
			  </el-form-item>
			  <el-form-item 
			  	style="margin-top: 30px;"
			  	label="手机号" 
			  	prop="mobile"
			  	:rules="[
			      { required: true, message: '请输入正确手机号', trigger: 'blur' },
            	  { min: 11, max: 11, message: '手机号输入11位', trigger: 'blur' }
			    ]">
			    <el-input 
			    	v-model="sizeForm.mobile" 
			    	placeholder="请输入成员手机号"
			    	maxlength="11" 
			    	minlength="11" ></el-input>
			  </el-form-item>
			  <el-form-item 
			  	label="担任职务" 
			  	prop="roleId"
			  	style="margin-top: 30px;">
			    <el-select multiple v-model="sizeForm.roleIds" placeholder="请选择担任职务" style="width: 100%;">
			      <el-option v-for="(item,index) in workerdata" 
			      	:key="item.roleName" 
			      	:label="item.roleName" 
			      	:value="item.roleId"></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item 
			  	label="职称等级" 
			  	prop="levelId"
			  	style="margin-top: 30px;">
			    <el-select v-model="sizeForm.levelId" placeholder="请选择职称等级" style="width: 100%;">
			      <el-option v-for="(item,index) in graddata" :key="item.levelName" :label="item.levelName" :value="item.levelid"></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item 
			  	label="所在部门" 
			  	prop="deptId"
			  	style="margin-top: 30px;">
			    <el-select v-model="sizeForm.deptId" placeholder="请选择所在部门" style="width: 100%;">
			      <el-option v-for="(item,index) in bmdata" :key="item.name" :label="item.name" :value="item.deptId"></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item
			  	style="margin-top: 30px;"
			    prop="email"
			    label="联系邮箱"
			    :rules="[
			      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
			      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
			    ]">
			    <el-input v-model="sizeForm.email" placeholder="请输入联系邮箱"></el-input>
			  </el-form-item>
				<el-form-item 
			  	label="新增账号：" 
			  	style="margin-top: 30px;"
			  	prop="username"
			  	:rules="[
			      { required: true, message: '账号不能为空',trigger: 'blur'},
			      { message: '账号必须不为空',trigger: 'blur'}
			    ]">
			    <el-input v-model="sizeForm.username" placeholder="请输入新增账号"></el-input>
			 </el-form-item>
			 <el-form-item 
			  	label="新增密码：" 
			  	style="margin-top: 30px;"
			  	prop="password"
			  	:rules="[
			      { required: true, message: '密码不能为空',trigger: 'blur'},
			      { min: 6, max: 6,message: '请输入正确的6位密码',trigger: 'blur'}
			    ]">
			    <el-input v-model="sizeForm.password" 
			    	placeholder="请输入密码" 
			    	maxlength="6" 
			    	minlength="6" 
			    	show-password></el-input>
			 </el-form-item>
			</el-form>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button :type="fromaddBtncolor" @click="adduserClick">保存</el-button>
		  </span>
		</el-dialog>
		<!--修改昵称-->
		<el-dialog
		  title="修改昵称"
		  :visible.sync="updatanameflag"
		  width="20%"
		  center>
		  <div class="bmupdataname">
		  	<input v-model="BMname" :placeholder="BMname" height="100%"></input>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="updatanameSure">确 定</el-button>
		  </span>
		</el-dialog>
		<!--设置所在部门-->
		<el-dialog
		  title="设置所在部门"
		  :visible.sync="bmset"
		  width="20%"
		  center>
		  <div class="fromadd">
		  	<el-form ref="frombm" :model="bmfrom" label-width="100px">
		  	<el-form-item 
			  	label="所在部门" 
			  	style="margin-top: 30px;"
			  	prop="region">
			    <el-select v-model="bmfrom.bmsl" placeholder="请选择部门" style="width: 100%;">
			      <el-option v-for="(item,index) in bmdata" :key="item.name" :label="item.name" :value="item.deptId"></el-option>
			    </el-select>
			  </el-form-item>
			</el-form>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="setBmClick()">确 定</el-button>
		  </span>
		</el-dialog>
		<!--子部门输入-->
		<el-dialog
		  :title="'新增《'+setbmtitle+'》子部门'"
		  :visible.sync="setbmname"
		  width="30%"
		  center>
		  <div class="bmupdataname">
		  	<input v-model="setBMname" placeholder="输入子部门名字" height="100%"></input>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="saveBmclick">保存部门</el-button>
		  </span>
		</el-dialog>
		<!--增加子部门-->
		<SelectUserModel :modeshow="modeshow" />
	</div>
</template>

<script>
import SelectUserModel from '@/components/SelectUserModel/selectmodel'
import Bus from '@/common/config/bus'
import {
	treemenulist,
	menuIdlist,
	worklist,
	savelocalexcel,
	selectdelalllist,
	adduser,
	batchEdit,
	updatabm,
	savszbm} from '@/service/fromstruct'
import {allrolelist} from '@/service/powerstruct'
export default {
	components:{
		SelectUserModel
	},
  data () {
    return {
    	/*数据列表模拟*/
    	list:[],
    	/*数据操作菜单*/
    	optiondata:[
    		{id:0,name:'增加成员'},
    		{id:1,name:'批量导入'},
    		{id:2,name:'批量导出'},
    		{id:3,name:'设置所在部门'},
    		{id:4,name:'删除'},
    		{id:5,name:'微信邀请'},
    	],
    	optionflag:false,//数据操作状态
    	tableData: [],
        //部门人数名字选择父级菜单数据
        bmname:'',
        bmnumber:0,
        modeshow:false,
        listI:0,
        sonlistI:-1,
        loading:false,
        tableloading:false,
        listX:-1,
        centerDialogVisible:false,
        fromaddBtncolor:'info',
        //修改昵称
        updatanameflag:false,
        BMname:'',
        //设置所在部门
        bmset:false,
        //增加部门
        addBm:true,
        //新增时内容
        sizeForm:{
        	name:'',
        	mobile:'',
        	roleIds:'',
        	levelId:'',
        	deptId:'',
        	email:'',
        	username:'',
        	password:'123456'
        },
        workerdata:[],
        //职称等级数据
        graddata:[],
        //所在部门
        bmdata:[],
        //列表请求参数
        listiddata:{},
        limit:10,
        offset:1,
        totall:0,
        //选择的数据数组
        selectdata:[],
        selectdataId:[],
        //部门设置
        bmfrom:{
        	bmsl:'',
        },
        //列表数据切割data
        worklist:[],
        //当前菜单选择数据
        menuselectlist:{},
        sonmenuselectlist:{},
        //子部门名字
        setbmtitle:'',
        setbmname:false,
        setBMname:'',
        //选择的加入的人物数据
        selectmodeldata:[],
        //搜索字段
        sreachname:'',
    }
  },
  
  created(){
  		const that = this
		this.loadtreemenulist()
		let headerdata = {
			type:1,
			name:'组织架构',
		}
		Bus.$emit('headerline',headerdata)
		Bus.$on('close',function(data){
			that.selectmodeldata = data.datainfo
			that.addNewBm(data.show)
			that.setbmname = true
		})
  },
  methods:{
  	//搜索
  	sreachClick(){
  		if(this.sreachname === ''){
  			this.$notify({
	          title: '警告',
	          message: '请输入成员',
	          type: 'warning'
	        });
  		}else{
  			let data = {
				limit:this.limit,
				offset:1,
				name:this.sreachname
			}
	  		this.Idloadlist(data)
  		}
  	},
  	//保存子部门
  	saveBmclick(){
  		const that = this
  		if(this.setBMname != ''){
  			var userIdList = []
			for (var i = 0; i < this.selectmodeldata.length; i++) {
				userIdList.push(this.selectmodeldata[i].userId)
			}
			let data = {
				parentId:this.menuselectlist.deptId,
				name:this.setBMname,
				userIdList:userIdList
			}
			this.loading = true
			savszbm(data).then(res =>{
				that.loading = false
				if(res.data.code === 0){
					that.loadtreemenulist()
					that.$notify({
			          title: '成功提示',
			          message: '修改部门名字成功',
			          type: 'success'
			        });
				}else{
					that.loading = false
					that.$notify({
			          title: '警告',
			          message: '服务器出错了',
			          type: 'warning'
			        });
				}
			})
			.catch(res => {
	      	that.$message.error(res);
	    	});
  		}else{
  			this.$notify({
	          title: '警告',
	          message: '没有部门名字',
	          type: 'warning'
	        });
  		}
  	},
  	//新增子部门
  	addNewBm(flag){
  		const that = this
  		that.modeshow = flag
  		that.setbmtitle = that.bmname.split('>')[0]
  	},
  	//确认修改部门
  	updatanameSure(){
  		if(JSON.stringify(this.menuselectlist) == "{}"){
  			let data = {
  				deptId:this.sonmenuselectlist.deptId,
  				name:this.BMname
  			}
     		this.loadupdatabm(data)
     	}else{
     		let data = {
  				deptId:this.menuselectlist.deptId,
  				name:this.BMname
  			}
     		this.loadupdatabm(data)
     	}
  	},
  	//修改事件
     updataNameClick(){
     	console.log(this.menuselectlist)
     	console.log(this.sonmenuselectlist)
     	if(JSON.stringify(this.menuselectlist) == "{}"){
     		this.BMname = this.sonmenuselectlist.name
     	}else{
     		this.BMname = this.menuselectlist.name
     	}
     	this.updatanameflag = true
     },
  	//修改部门名字请求
  	loadupdatabm(data){
  		const that = this
		this.loading = true
		console.log(data)
		updatabm(data).then(res =>{
			that.loading = false
			console.log(res)
			if(res.data.code === 0){
				that.loadtreemenulist()
				that.Idloadlist(that.listiddata)
				that.updatanameflag = false
				that.$notify({
		          title: '成功提示',
		          message: '修改部门名字成功',
		          type: 'success'
		        });
			}else{
				that.loading = false
				that.$notify({
		          title: '警告',
		          message: '服务器出错了',
		          type: 'warning'
		        });
			}
		})
		.catch(res => {
        	that.$message.error(res);
      	});
  	},
  	//确认部门设置
  	setBmClick(){
  		let setbmdata = {
  			deptId:this.bmfrom.bmsl,
  			userIdList:this.selectdataId
  		}
  		this.loadbatchEdit(setbmdata)
  	},
  	//设置所在部门加载
  	loadbatchEdit(data){
  		const that = this
		this.loading = true
		console.log(data)
		batchEdit(data).then(res =>{
			that.loading = false
			console.log(res)
			if(res.data.code === 0){
				that.Idloadlist(that.listiddata)
				that.bmset = false
				that.$notify({
		          title: '成功提示',
		          message: '设置部门成员成功',
		          type: 'success'
		        });
			}else{
				that.loading = false
				that.$notify({
		          title: '警告',
		          message: '服务器出错了',
		          type: 'warning'
		        });
			}
		})
		.catch(res => {
        	that.$message.error(res);
      	});
  	},
  	adduserClick(){
  		console.log(this.sizeForm)
  		const that = this
  		this.$refs.form.validate(valid => {
  			if (valid && !this.loading) {
  				that.loadadduser(that.sizeForm)
  			}else{
  				 this.$alert('填写不合格，请仔细检查', '填写不成功', {
		          confirmButtonText: '确定',
		          callback: action => {
		            this.$message({
		              type: 'info',
		              message: `action: ${ action }`
		            });
		          }
		        });
  			}
  		})
        
  	},
  	//加载权限用户数据
	loadallrolelist(){
		const that = this
		this.loading = true
		allrolelist().then(res =>{
			this.loading = false
			that.workerdata = res.data.data
		})
		.catch(res => {
        	that.$message.error(res);
      	});
	},
  	//新增用户
  	loadadduser(data){
  		const that = this
		this.loading = true
		console.log(data)
		adduser(data).then(res =>{
			that.loading = false
			console.log(res)
			if(res.data.code === 0){
				that.Idloadlist(that.listiddata)
				that.centerDialogVisible = false
				that.$notify({
		          title: '成功提示',
		          message: '新增成员成功',
		          type: 'success'
		        });
			}else{
				that.loading = false
				that.$notify({
		          title: '警告',
		          message: '服务器出错了',
		          type: 'warning'
		        });
			}
		})
		.catch(res => {
        	that.$message.error(res);
      	});
  	},
  	//批量删除数据
  	loadselectdelalllist(data){
  		const that = this
		this.loading = true
		let deldata = {
				userIdList:data
			}
		selectdelalllist(deldata).then(res =>{
			that.loading = false
			if(res.data.code === 0){
				that.Idloadlist(that.listiddata)
				that.$notify({
		          title: '成功提示',
		          message: '删除成员成功',
		          type: 'success'
		        });
			}else{
				that.loading = false
				that.$notify({
		          title: '警告',
		          message: '服务器出错了',
		          type: 'warning'
		        });
			}
		})
		.catch(res => {
        	that.$message.error(res);
      	});
  	},
  	//职称查询
  	workloadlist(){
  		const that = this
		this.loading = true
		worklist().then(res =>{
			console.log(res)
			that.loading = false
			that.graddata = res.data.data
		})
		.catch(res => {
			console.log(res)
        	that.$message.error(res);
      	});
  	},
  	//分页
  	handleCurrentChange(e){
  		this.listiddata.offset = e
  		this.tableData = []
  		this.Idloadlist(this.listiddata)
  	},
  	//点击获取部门数据
  	Idloadlist(data){
  		const that = this
		this.tableloading = true
		menuIdlist(data).then(res =>{
			that.tableloading = false
			that.worklist = []
			that.tableData = res.data.data.rows
			for(let i = 0;i < that.tableData.length;i++){
				that.worklist[i] = that.tableData[i].roleName.split(',')
			}
			console.log(that.worklist)
			that.totall = res.data.data.total
			that.bmnumber = res.data.data.total
		})
		.catch(res => {
			console.log(res)
        	that.$message.error(res);
      	});
  	},
  	//加载菜单数九
	loadtreemenulist(){
		const that = this
		this.loading = true
		treemenulist().then(res =>{
			console.log(res)
			that.loading = false
			that.list = res.data.data
			let data = {
				limit:that.limit,
				offset:that.offset,
				deptId:res.data.data[0].deptDOS[0].deptId,
			}
     		that.listiddata = data
     		that.Idloadlist(data)
     		that.bmname = res.data.data[0].name+">"+ res.data.data[0].deptDOS[0].name
     		that.listX = 0
     		that.sonlistI = -1
     		that.bmdata = res.data.data[0].deptDOS
     		that.menuselectlist = res.data.data[0]
		})
		.catch(res => {
			console.log(res)
        	that.$message.error(res);
      	});
	},
  	 handleSelectionChange(val) {
        console.log(val)
        if(val.length > 0){
        	this.selectdata = val
        	this.optionflag = true
        }else{
        	this.optionflag = false
        }
     },
     listClick(it,i){
     	this.sonmenuselectlist = {}
     	this.menuselectlist = it
     	this.bmname = it.name+">"+it.deptDOS[0].name
     	this.bmnumber = it.deptDOS[0].orderNum
     	this.bmdata = it.deptDOS
     	this.listI = i
     	this.sonlistI = -1
     	this.addBm = true
     	if(this.listX === i){
     		this.listX = -1
     		this.sonlistI = 0
     	}else{
     		this.listX = i
     		let data = {
				limit:this.limit,
				offset:this.offset,
				deptId:it.deptDOS[0].deptId,
			}
     		this.listiddata = data
     		this.Idloadlist(data)
     		this.sonlistI = -1
     	}
     },
     sonListClick(it,item,index){
     	const that =this
     	this.menuselectlist = {}
     	this.sonmenuselectlist = item
     	this.bmname = it.name+">"+item.name
     	this.bmnumber = item.orderNum
     	this.sonlistI = index
     	this.addBm = false
     	let data = {
				limit:this.limit,
				offset:this.offset,
				deptId:item.deptId
			}
     	this.listiddata = data
     	this.Idloadlist(this.listiddata)
     },
     //操作方法
     optionClick(item){
     	if(item.id === 0){
     		this.centerDialogVisible = true
     		this.workloadlist()
     		this.loadallrolelist()
     	}else if(item.id === 1){
     		
     	}else if(item.id === 2){
     		if(this.selectdata.length > 0){
     			var userIdList = ''
     			for (var i = 0; i < this.selectdata.length; i++) {
     				if(i === this.selectdata.length - 1){
     					userIdList = userIdList + this.selectdata[i].userId
     				}else{
     					userIdList = userIdList + this.selectdata[i].userId +','
     				}
     			}
     			console.log(userIdList)
	     		this.$confirm('将为你导出你所在选的数据为excel表', '导出提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		        	window.open(process.env.API_ROOT+"/sys/user/saveUserExcel?userIdList="+userIdList);
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        });
     		}else{
     			this.$notify({
		          title: '警告',
		          message: '请选择数据才可以执行导出excel表操作哦',
		          type: 'warning'
		       });
     		}
     	}else if(item.id === 3){
     		const that = this
     		if(this.selectdata.length > 0){
     			this.selectdataId = []
     			this.bmset = true
     			for(let i=0;i<this.selectdata.length;i++){
     				this.selectdataId.push(this.selectdata[i].userId)
     			}
     		}else{
     			this.$notify({
		          title: '警告',
		          message: '请选择数据才可以执行哦',
		          type: 'warning'
		       });
     		}
     	}else if(item.id === 4){
     		if(this.selectdata.length > 0){
     			this.selectdataId = []
     			var userIdList = ''
     			for (var i = 0; i < this.selectdata.length; i++) {
     				if(i === this.selectdata.length - 1){
     					userIdList = userIdList + this.selectdata[i].userId
     				}else{
     					userIdList = userIdList + this.selectdata[i].userId +','
     				}
     			}
     			console.log(userIdList)
	     		this.$confirm('确定要删除吗？', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		        	for(let i=0;i<this.selectdata.length;i++){
		     			this.selectdataId.push(this.selectdata[i].userId)
		     		}
		     		this.loadselectdelalllist(this.selectdataId)
		        }).catch((e) => {
					console.log(e)
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        });
     		}else{
     			this.$notify({
		          title: '警告',
		          message: '请选择数据才可以执行删除哦',
		          type: 'warning'
		       });
     		}
     		
     	}else if(item.id === 5){
     		
     	}
     },
     //导出数据excel到本地
  	loadsavelocalexcel(userIdList){
  		const that = this
		this.loading = true
		let data = {
			userIdList:userIdList
		}
		savelocalexcel(data).then(res =>{
			console.log(res)
			that.loading = false
			
		})
		.catch(res => {
			console.log(res)
        	that.$message.error(res);
      	});
  	},
  }
}
</script>

<style scoped lang="scss">
$from_bg_color:#F9FAFC;
$from_active:#409EFF;
	.fromStructure{
		width: 100%;
		height: 100%;
		display: inline-flex;
		/*左边子菜单*/
		.fromStructure-left{
			width: 300px;
			height: 100%;
			display: flex;
			flex-flow: column;
			overflow: auto;
			background-color: $from_bg_color;
			border:1px solid #EFF5FD;
			.fromStructure-sreach{
				display: inline-flex;
				margin: 0 2%;
				width: 96%;
				margin-bottom: 20px;
				margin-top: 20px;
				.sreach-input-content{
					width: 80%;
					border: 0;
					margin-left: 5px;
					background-color: white;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					height: 30px;
					.sreach{
						width: 15%;
						height: 100%;
						line-height: 32px;
						font-size: 16px;
					}
					.sreach-input{
						margin-left: 5px;
						height: 28px;
						width: 85%;
						border: 0;
						padding-left: 10px;
					}
					.sreach-input input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
						margin-left: 10px;
						padding-left: 10px;
					}
					.sreach-input input::-moz-placeholder { /* Firefox 19+ */  
						margin-left: 10px;
					}
					.sreach-input input:-ms-input-placeholder { /* IE 10+ */ 
						margin-left: 10px;
					}
					.sreach-input input:-moz-placeholder { /* Firefox 18- */ 
						margin-left: 10px;
					}
				}
				.addUser{
					.userIcon{
						font-family: "微软雅黑";
						font-size: 22px;
						line-height:30px;
						margin-left: 10px;
					}
				}
			}
			/*列表*/
			.list-left{
				margin-left: 10px;
				width: 96%;
				margin-top: 2px;
				.left-in{
					cursor: pointer;
					padding: 2px 0;
					background-color: white;
					width: 100%;
					display: inline-flex;
					align-items: center;
					.wjicon{
						width: 14%;
						margin-left: 10px;
						font-size: 16px;
					}
					.listname{
						width: 72%;
						font-family: "微软雅黑";
						font-size: 14px;
						text-align: left;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}
					.moreicon{
						widows: 13%;
						font-family: "微软雅黑";
						font-size: 17px;
					}
				}
				.sonlist{
					cursor: pointer;
					margin-left: 10%;
					width: 90%;
					padding: 2px 0;
					border-top: 1px solid $from_bg_color;
					background-color: white;
					display: inline-flex;
					align-items: center;
					.wjicon{
						width: 15%;
						font-size: 18px;
					}
					.listname{
						width: 72%;
						font-family: "微软雅黑";
						font-size: 14px;
						text-align: left;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}
					.moreicon{
						widows: 13%;
						font-family: "微软雅黑";
						font-size: 16px;
					}
				}
				.active{
					background-color: $from_active;
					color: white;
				}
			}
		}
		/*内容*/
		.fromStructure-content{
			width: 100%;
			overflow: auto;
			border-top: 1px solid rgba(0,0,0,0.1);
			border-bottom: 1px solid rgba(0,0,0,0.1);
			border-right: 1px solid rgba(0,0,0,0.1);
			border-top-right-radius: 10px;
			border-bottom-right-radius: 10px;
			height: 100%;
			.content-header{
				margin: 0 1%;
				width: 98%;
				color: $from_active;
				padding: 20px 0px;
				text-align: center;
				display: inline-flex;
				justify-content: flex-start;
				align-items: center;
				text-align: center;
				.titles{
					width: 86%;
					display: inline-flex;
					align-items: center;
					.ttitle{
						font-family: "微软雅黑";
						font-size: 16px;
						text-align: left;
						line-height: 20px;
					}
				}
				.right-option{
					width: 300px;
					right: 0;
					display: inline-flex;
					.updataname{
						flex: 1;
						cursor: pointer;
						text-align: center;
						border-right: 1px solid $from_active;
						/*padding-right: 50px;*/
					}
					.addbm{
						flex: 1;
						text-align: center;
						cursor: pointer;
					}
				}
				
			}
			/*操作*/
			.option{
				margin: 0 1%;
				width: 98%;
				height: 50px;
				padding: 10px 0;
				display: inline-flex;
				font-family: "微软雅黑";
				background-color: #DFE9F5;
				text-align: left;
				.option-cell:first-child{
					margin-left: 30px;
				}
				.option-cell{
					margin-left: 10px;
					display: inline-flex;
					cursor: pointer;
					background-color: white;
					padding: 5px 30px;
					.optionicon{
						display: inline-block;
						font-size: 16px;
						margin-top: 1px;
						margin-right: 10px;
					}
					.option-name{
						font-size: 15px;
					}
				}
				.active{
					background-color: $from_active;
					color: white;
				}
			}
			/*数据表*/
			.option-table{
				margin: 0 1%;
				width: 98%;
				min-height: 200px;
			}
			/*分页*/
			.pages-other{
				margin-top: 20px;
				width: 100%;
			}
		}
		.fromadd{
			margin: 0 5%;
			width: 90%;
		}
		.bmupdataname{
			margin: 0 5%;
			height: 70px;
			width: 90%;
		    input{
		    	-webkit-appearance: none;
			    background-color: #FFF;
			    background-image: none;
			    border-radius: 4px;
			    border: 1px solid #DCDFE6;
			    -webkit-box-sizing: border-box;
			    box-sizing: border-box;
			    color: #606266;
			    display: inline-block;
			    font-size: inherit;
			    height: 70px!important;
		    	line-height: 70px!important;
			    outline: 0;
			    padding: 0 15px;
			    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
			    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
			    width: 100%;
		    }
		}
		.addbm{
			margin: 0 5%;
			width: 90%;
		}
	}
	
	
</style>